<template>
  <div class="app-login" @keyup.enter="onSubmit">
    <div class="login-header">
      <img src="../assets/img/logo_03.png" height="40" alt="" />
      <h1 class="login-brand">{{ platformName }}</h1>
    </div>

    <div class="login-content">
      <div class="container">
        <div class="row">
          <div class="col-sm-6 col-md-8">
            <img src="../assets/img/login_advert_01.png" alt="" class="img-fluid mt-5" />
          </div>
          <div class="col-sm-6 col-md-4">
            <div class="login-main">
              <h3 class="login-title">{{ platformName }}</h3>
              <p class="text-center text-muted mb-5">农业信用担保贷款好帮手</p>

              <div class="login-form">
                <el-form :model="loginForm" :rules="rules" ref="loginForm">
                  <el-form-item prop="loginName">
                    <el-input
                      placeholder="用户名/手机账号"
                      size="lager"
                      v-model.trim="loginForm.loginName"
                    >
                      <i slot="prefix" class="el-input__icon fa fa-user"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item prop="loginSecret">
                    <el-input
                      type="password"
                      placeholder="密码"
                      size="lager"
                      v-model.trim="loginForm.loginSecret"
                    >
                      <i slot="prefix" class="el-input__icon fa fa-lock"></i>
                    </el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="large"
                      class="btn-block"
                      style="height: 42.5px"
                      @click="onSubmit"
                      :loading="loginLoading"
                    >
                      登 录
                    </el-button>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="container my-5">
      <div class="row">
        <div class="col-sm-3 text-center">
          <p>关于我们</p>
          <div>
            <a href="http://www.trnxdb.com/Item/list.asp?id=1741" class="text-muted">农担简介</a>
          </div>
          <div>
            <a href="http://www.trnxdb.com/Item/list.asp?id=1732" class="text-muted">工作动态</a>
          </div>
        </div>
        <div class="col-sm-3 text-center">
          <p>业务介绍</p>
          <div>
            <a href="http://www.trnxdb.com/Item/list.asp?id=1734" class="text-muted">产品介绍</a>
          </div>
          <div>
            <a href="http://www.trnxdb.com/Item/list.asp?id=1716" class="text-muted">合作企业</a>
          </div>
        </div>
        <div class="col-sm-3 text-center">
          <p>农信贷APP</p>
          <div>
            <img src="../assets/img/weixin.jpg" alt="" />
          </div>
          <p class="text-muted">微信二维码</p>
        </div>
        <div class="col-sm-3 text-center">
          <p>联系我们</p>
          <div class="text-muted">0856-5251988</div>
          <div>
            <a href="http://www.trnxdb.com/plus/form/index.asp?id=6" class="text-muted">互动交流</a>
          </div>
        </div>
      </div>
    </div>

    <p class="login-copyright">
      <small v-html="TEXT_COPYRIGHT"></small>
    </p>
  </div>
</template>
<script>
import { PLATFORM_ORG } from '@/credit/plugins/constant'
import { convertLoginErrMsg } from '@/common/plugins/tools/convert'
import { TEXT_COPYRIGHT } from '@/common/plugins/constant'

export default {
  components: {},
  props: {},
  data() {
    return {
      TEXT_COPYRIGHT,
      platformName: '融e担大数据平台',
      loginForm: {
        orgClassType: 5,
        loginName: '',
        loginSecret: '',
      },
      rules: {
        loginName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        loginSecret: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      },
      loginLoading: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.platformName = '融e担大数据平台' || this.$route.meta.title
  },
  mounted() {},
  methods: {
    onSubmit() {
      // 登录验证
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.postLogin()
        } else {
          this.$message.error('请输入用户名或密码！')
        }
      })
    },

    postLogin() {
      this.loginLoading = true
      this.$store
        .dispatch('login', {
          data: this.loginForm,
          validator: info => PLATFORM_ORG.includes(info.clientOrgClass),
        })
        .then(() => {
          this.$message({ message: '登录成功', type: 'success', showClose: true, duration: 3000 })
          this.$router.replace('/')
        })
        .catch(err => {
          this.$message.error(convertLoginErrMsg(err))
        })
        .finally(() => {
          this.loginLoading = false
        })
    },
  },
}
</script>
<style scoped lang="scss">
.app-login {
  min-height: 100vh;
  position: relative;
  background-color: #fff;
  /* @include gradient-radial(
    lighten($primary, 55%),
    lighten($primary, 40%),
    ellipse
  ); */
}

.login-header {
  height: 60px;
  border-bottom: 1px solid $border-color;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.login-brand {
  font-size: 24px;
  font-weight: bold;
  margin-left: 1rem;
}

.login-main {
  width: 380px;
  padding: 2rem 3rem;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  border: 1px solid $gray-300;
  box-shadow: 0 0 4px $gray-400;
}

.login-content {
  padding: 5rem 0;
  background-image: url(/bigdata/img/login/login_bg_02.jpg);
}

.login-title {
  font-size: 24px;
  color: $gray-700;
  text-align: center;
  margin-top: 0;
  margin-bottom: 1rem;
}

.login-copyright {
  /* position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0; */
  margin-bottom: 0;
  margin-top: 5rem;
  text-align: center;
  color: $gray-600;
  z-index: 2;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 0;
}
</style>
